<template>
  <div class="order">
    <div id="messagebody">
      <div id="order_nav">
        <ul>
          <li id="order_li">全部</li>
          <li id="order_li">正在进行</li>
          <li id="order_li">已完成</li>
        </ul>
      </div>
      <ul id="order_ul" style="display:block">
        <li v-for="(v,k) in order" :key="k">
          <div id="order_top">
            <strong>2019-8-24</strong>&nbsp;&nbsp;&nbsp;
            <div>
              <span>订单号：&nbsp;</span>
              <span>{{v.orderID}}</span>
            </div>
          </div>
          <div id="order_main">
            <div id="order_img">
              <img src="../assets/Person/bg1.jpg" alt />
            </div>
            <div id="order_text">
              <ul>
                <li>
                  <h4>车名：</h4>
                  <h4>{{v.carName}}</h4>
                </li>
                <li>
                  <span>车辆信息：</span>
                  <span>芒种牌/2.0L 1.5L/自动</span>
                </li>
                <li>
                  <span>用车时间：</span>
                  <span>{{v.pickDate}}</span>
                  <span>-</span>
                  <span>{{v.returnDate}}</span>
                </li>
                <li>
                  <span>拼车状态：</span>
                  <span>{{v.orderState}}</span>
                </li>
              </ul>
            </div>
            <div id="order_right">
              <p>
                <span>订单金额：</span>
                <strong>￥{{v.price}}</strong>
              </p>
              <span class="btn btn-success">再次预定</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      order: [],
      currentUser: {}
    };
  },
  created() {
    this.$axios
      .post("http://localhost:3000/personal/ShowSharingOrderState")
      .then(res => {
        console.log("拼车查询结果：", res.data.data);
        this.order = res.data.data;
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
  }
};
</script>
<style>
/* * {
  margin: 0;
  padding: 0;
}
.order {
  flex: 2;
}

ul {
  list-style: none;
}

#messagebody {
  height: 500px;
}

#order_nav > ul {
  border-bottom: 2px solid grey;
}

#order_nav > ul > li {
  width: 80px;
  height: 30px;
  display: inline-block;
  text-align: center;
  margin-bottom: 5px;
  cursor: pointer;
}

#order_ul > li {
  height: 200px;
  border: 1px solid transparent;
  box-shadow: 0 0 6px #ccc;
  margin-bottom: 20px;
  background-color: #fff;
}

#order_top {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #bbb;
  display: flex;
}

#order_top strong {
  margin-left: 10px;
}

#order_main {
  width: 100%;
  height: 110px;
  background-color: #fff;
  display: flex;
}

#order_main img {
  width: 150px;
  flex: 2;
  margin: 10px;
  margin-top: 15px;
}

#order_text {
  margin-top: 15px;
}

#order_text > ul {
  flex: 5;
}

#order_text > ul > li {
  margin: 8px;
}

#order_text li h4 {
  display: inline-block;
  margin: 0px;
}

#order_right {
  flex: 2;
  margin-top: 15px;
  text-align: center;
}

#order_over_ul > li {
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
  background-color: #fff;
  padding-bottom: 20px;
}

#order_over_top {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #bbb;
  display: flex;
  position: relative;
}

#order_over_top > div {
  margin-left: 10px;
}

#order_over_top > div:last-child {
  text-align: left;
  font-size: 10px;
  color: gray;
  position: absolute;
  right: 10px;
}

#order_over_main {
  margin-top: 10px;
  margin-left: 10px;
}

#order_over_img > img {
  width: 150px;
}

#order_over_myorder {
  width: 100%;
  height: 100px;
  display: flex;
  margin-top: 20px;
  background-color: #f1f1f1;
  margin-left: 0;
  cursor: pointer;
}

#myorder_img {
  width: 200px;
  height: 100%;
}

#myorder_img > img {
  width: 100%;
  height: 100%;
}

#myorder_text {
  margin-left: 10px;
}

#myorder_text li {
  margin: 5px;
}

#myorder_text h4 {
  display: inline-block;
}

#order_over_bottom {
  margin-top: 20px;
  margin-bottom: 10px;
} */
</style>
